<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <title>客户关系查询</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('客户管理','客户管理')"></div>
</div>

<div th:fragment="content" th:remove="tag">
    <div class="row">
        <div class="col-xs-12">

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">查询条件</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <form role="form" id="queryForm"  method="post" >
                    <div class="box-body">
                        <div class="row">
                            <div class="col-xs-3">
                                <input type="text" th:name="kaName" class="form-control input-sm" placeholder="客户名"/>
                            </div>
                            <div class="col-xs-3">
                                <input type="text" th:name="areaName" class="form-control input-sm" placeholder="区/县"/>
                            </div>
                            <div class="col-xs-3">
                                <input type="text" th:name="loginName" class="form-control input-sm" placeholder="工号"/>
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-xs-3">
                                <input type="text" th:name="empName" class="form-control input-sm" placeholder="联系人名称"/>
                            </div>
                            <div class="col-xs-3">
                                <input type="text" th:name="phone" class="form-control input-sm" placeholder="联系人电话"/>
                            </div>
                            <input type="hidden" th:name="storeId" id="empQueryId" />
                            <shiro:hasRole name="sys_bd">
                                <input type="hidden" th:name="cityAgencyId" th:value="${session.authUser.userId}"/>
                            </shiro:hasRole>
                            <div class="col-xs-3">
                                <button id="btn-query" type="button" class="btn btn-primary pull-right btn-sm">查询
                                </button>
                            </div>
                        </div>

                    </div>
                </form>
        </div>
        </div>
    </div>
    <!--批量操作-->
    <form role="form" id="kaQueryForm"  method="post">
        <shiro:hasRole name="sys_bd">
            <input type="hidden" th:name="cityAgencyId" th:value="${session.authUser.userId}"/>
        </shiro:hasRole>
        <input type="hidden" th:name="areaName" id="kaQueryArea"/>
    </form>
    <form role="form" id="storeQueryForm"  method="post">
        <shiro:hasRole name="sys_bd">
            <input type="hidden" th:name="cityAgencyId" th:value="${session.authUser.userId}"/>
        </shiro:hasRole>
        <input type="hidden" th:name="kaInfoId" id="storeQueryId" />
    </form>

    <div class="row">
        <div class="col-xs-12">

            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#kaCount" data-toggle="tab" >客户数</a>
                </li>
                <li><a href="#kalist" data-toggle="tab">客户列表</a></li>
                <li><a href="#storelist" data-toggle="tab">门店列表</a></li>
                <li><a href="#emplist" data-toggle="tab">店员列表</a></li>
            </ul>

            <div id="myTabContent" class="tab-content">
                <div class="box tab-pane fade in active" id="kaCount">
                    <div class="box-body">
                        <table id="dataTable" class="table table-striped table-bordered table-hover table-condensed">
                            <thead id="kaCountTable">
                            <tr>
                                <th>地市</th>
                                <th>区县（客户数）</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="box tab-pane fade in" id="kalist">
                    <div class="box-body">
                        <div class="table-responsive">
                        <table id="dataTable1" class="table table-striped table-bordered table-hover table-condensed">
                            <thead id="kaTable">
                            <tr>
                                <th>区县</th>
                                <th>客户名（门店数）</th>
                                <th>老板</th>
                                <th>电话</th>
                                <th>状态</th>
                                <th>佣金比例(%)</th>
                                <th>创建时间</th>
                            </tr>
                            </thead>
                        </table>
                        </div>
                    </div>
                </div>
                <div class="box tab-pane fade in" id="storelist">
                    <div class="box-body">
                        <div class="table-responsive">
                        <table id="dataTable2" class="table table-striped table-bordered table-hover table-condensed">
                            <thead id="storeTable">
                            <tr>
                                <th>区县</th>
                                <th>门店名（工号数）</th>
                                <th>负责人</th>
                                <th>电话</th>
                                <th>详细地址</th>
                            </tr>
                            </thead>
                        </table>
                        </div>
                    </div>
                </div>
                <div class="box tab-pane fade in" id="emplist">
                    <div class="box-body">
                        <div class="table-responsive">
                        <table id="dataTable3" class="table table-striped table-bordered table-hover table-condensed">
                            <thead id="empTable">
                            <tr>
                                <th>区县</th>
                                <th>工号账户</th>
                                <th>姓名</th>
                                <th>电话</th>
                                <th>职务</th>
                                <th>状态</th>
                                <th>总金额</th>
                                <th>冻结金额</th>
                                <th>可提现</th>
                                <th>创建时间</th>
                            </tr>
                            </thead>
                        </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- DataTables -->
    <script >
        $(function () {
            var tables = $("#dataTable").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                pagingType: "full_numbers",
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/cityAgency/getCityAgencyInfo",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: [//对应上面thead里面的序列
                    {"data": 'cityName', defaultContent: ""},
                    {"data": 'temp', defaultContent: "",
                        "render":function(data,type,full,callback) {
                            return /*<![CDATA[*/"<a href='javascript:;' id='showKa'>"+data+"</a>"/*]]>*/;
                        }
                    }
            ],
            /*<![CDATA[*/
            dom: '<"toolbar">frtip',
                    /*]]>*/

                //每加载完一行的回调函数
                createdRow: function (row, data, index) {
                //修改单元格样式
                //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
            },
            initComplete: function (setting, json) {
                //初始化完成之后替换原先的搜索框。
            },


            language: {
                lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                        /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                    previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                },
                /*]]>*/
                zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
            }
          });
            var katable = $("#dataTable1").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                pagingType: "full_numbers",
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/ka/list",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#kaQueryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: [//对应上面thead里面的序列
                    {"data": 'areaName', defaultContent: ""},
                    {"data": 'temp', defaultContent: "",
                        "render":function(data,type,full,callback) {
                            return /*<![CDATA[*/"<a href='javascript:;' id='showStore'>"+data+"</a>"/*]]>*/;
                        }
                    },
                    {"data": 'contactName', defaultContent: ""},
                    {"data": 'contactPhone', defaultContent: ""},
                    {"data": 'status',
                        "render":function(data,type,full,callback) {
                            if(data==0) return /*<![CDATA[*/"<span class='label label-danger'>禁用</span>"/*]]>*/;
                            else return /*<![CDATA[*/"<span class='label label-success'>启用</span>"/*]]>*/;
                        }
                    },
                    {"data": 'rate', defaultContent: ""},
                    {"data": 'createTimeDate', defaultContent: ""},
                ],
                /*<![CDATA[*/
                dom: '<"toolbar">frtip',
                /*]]>*/

                //每加载完一行的回调函数
                createdRow: function (row, data, index) {
                    //修改单元格样式
                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                },
                initComplete: function (setting, json) {
                    //初始化完成之后替换原先的搜索框。
                },


                language: {
                    lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                    /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                        previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                    },
                    /*]]>*/
                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
                }
            });
            var storetable = $("#dataTable2").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                pagingType: "full_numbers",
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/store/list",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#storeQueryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: [//对应上面thead里面的序列
                    {"data": 'areaName', defaultContent: ""},
                    {"data": 'temp', defaultContent: "",
                        "render":function(data,type,full,callback) {
                            return /*<![CDATA[*/"<a href='javascript:;' id='showEmp'>"+data+"</a>"/*]]>*/;
                        }
                    },
                    {"data": 'contactName', defaultContent: ""},
                    {"data": 'contactPhone', defaultContent: ""},
                    {"data": 'address', defaultContent: ""},
                ],
                /*<![CDATA[*/
                dom: '<"toolbar">frtip',
                /*]]>*/

                //每加载完一行的回调函数
                createdRow: function (row, data, index) {
                    //修改单元格样式
                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                },
                initComplete: function (setting, json) {
                    //初始化完成之后替换原先的搜索框。
                },


                language: {
                    lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                    /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                        previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                    },
                    /*]]>*/
                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
                }
            });
            var emptable = $("#dataTable3").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                pagingType: "full_numbers",
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/emp/list",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: [//对应上面thead里面的序列
                    {"data": 'areaName', defaultContent: ""},
                    {"data": 'loginName', defaultContent: ""},
                    {"data": 'empName', defaultContent: ""},
                    {"data": 'phone', defaultContent: ""},
                    {"data": 'empType',
                        "render":function (data,type,full,callback) {
                            if(data=='1')
                                return /*<![CDATA[*/"<span class='label label-success'>店员</span>"/*]]>*/;
                            else return /*<![CDATA[*/"<span class='label label-success'>审核人</span>"/*]]>*/;
                        }
                    },
                    {"data": 'status',
                        "render":function(data,type,full,callback) {
                            if(data==1)
                                return /*<![CDATA[*/"<span class='label label-primary'>待审核</span>"/*]]>*/;
                            if(data==0) return /*<![CDATA[*/"<span class='label label-danger'>禁用</span>"/*]]>*/;
                            if(data==2 || data==3) return /*<![CDATA[*/"<span class='label label-success'>启用</span>"/*]]>*/;
                        }
                    },
                    {"data": 'totalMoney', defaultContent: ""},
                    {"data": 'frozenMoney', defaultContent: ""},
                    {"data": 'balanceMoney', defaultContent: ""},
                    {"data": 'createTimeDate', defaultContent: ""},
                ],
                /*<![CDATA[*/
                dom: '<"toolbar">frtip',
                /*]]>*/

                //每加载完一行的回调函数
                createdRow: function (row, data, index) {
                    //修改单元格样式
                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                },
                initComplete: function (setting, json) {
                    //初始化完成之后替换原先的搜索框。
                },


                language: {
                    lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                    /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                        previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                    },
                    /*]]>*/
                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
                }
            });
            //查询按钮
            $("#btn-query").on("click", function () {
                $("#myTab li:eq(3) ").find("a").click();
                $("#empQueryId").val(null);
                emptable.fnDraw();
            });
            $("#dataTable2 tbody").on("click", "#showEmp", function () {
                var data = storetable.api().row($(this).parents("tr")).data();
                $("#empQueryId").val(data.storeId);
                $("#myTab li:eq(3) ").find("a").click();
                emptable.fnDraw();
            })
            $("#dataTable1 tbody").on("click", "#showStore", function () {
                var data = katable.api().row($(this).parents("tr")).data();
                $("#storeQueryId").val(data.kaId);
                $("#myTab li:eq(2) ").find("a").click();
                storetable.fnDraw();
            })
            $("#dataTable tbody").on("click", "#showKa", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                $("#kaQueryArea").val(data.areaName);
                $("#myTab li:eq(1) ").find("a").click();
                katable.fnDraw();
            })
        })

    </script>


</div>
</body>
</html>
